<style>
#bgPopup{
    background: none repeat scroll 0 0 #000000;
	display: none;
	height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#formdangky{
	background: none repeat scroll 0 0 #FFF;
    height: 400px;
    left: 280px;
    margin: 40px auto;
    position: fixed;
    width: 700px;
    z-index: 10000;
	//padding-left:17px;
	border-radius:10px;
	border:2px solid #3398cc;
}

.md_bn_dk{
	width:690px;
	height:28px;
	background:#3398cc;
	border-radius:3px 3px 0 0;
	//margin-top:18px;
	font-size:14px;
	font-weight:bold;
	color:white;
	text-align:left;
	padding:8px 0 0 10px;
	margin-bottom:15px;
}
.btn_close_dk{width:28px; height:28px; float:right; background:url('images/btn_close.gif') no-repeat; margin:-5px 3px 0 0; cursor: pointer; }
.btn_close_dk:hover{opacity: 0.80;}
.md_ct_dk{width:100%;height:300px;//border:1px solid #3398cc;}
</style>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap-responsive.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.validate.js"></script>
<div class="md_bn_dk">Đăng ký thành viên
	<div class="btn_close_dk"></div>
	</div>
	<div class="md_ct_dk">
		<form class="form-horizontal" id="registerHere" method='post' action=''>
			<div class="control-group">
				<label class="control-label" for="input01">Tên đăng nhập</label>
				<div class="controls">
					<input type="text" class="input-xlarge" id="username" name="username">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01">Mật khẩu</label>
				<div class="controls">
					<input type="password" class="input-xlarge" id="password" name="password">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01">Nhập lại mật khẩu</label>
				<div class="controls">
					<input type="password" class="input-xlarge" id="cpassword" name="cpassword">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01">Email</label>
				<div class="controls">
					<input type="text" class="input-xlarge" id="user_email" name="user_email">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01">Giới tính</label>
				<div class="controls">
					<select name="gender" id="gender" >
						<option value="">Chọn giới tính</option>
						<option value="1">Nam</option>
						<option value="0">Nữ</option>
						<option value="-1">Khác</option>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01">Địa chỉ</label>
				<div class="controls">
					<input type="text" class="input-xlarge" id="address" name="address">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input01"></label>
				<div class="controls">
				   <button type="submit" class="btn btn-success">Tạo tài khoản</button>   
				</div>
			</div>
		</form>
		<script type="text/javascript">
	  $(document).ready(function(){
			$('#registerHere input').hover(function()
			{
			$(this).popover('show')
		});
			$("#registerHere").validate({
				rules:{
					username:"required",
					address:"required",
					user_email:{
							required:true,
							email: true
						},
					password:{
						required:true,
						minlength: 6
					},
					cpassword:{
						required:true,
						equalTo: "#password"
					},
					gender:"required"
				},
				messages:{
					username:"Nhập tên đăng nhập",
					address:"Nhập địa chỉ của bạn",
					user_email:{
						required:"Nhập địa chỉ Email",
						email:"Địa chỉ Email chưa đúng"
					},
					password:{
						required:"Nhập mật khẩu",
						minlength:"Mật khẩu phải có tối thiểu 6 ký tự"
					},
					cpassword:{
						required:"Nhập lại mật khẩu",
						equalTo:"Mật khẩu chưa giống nhau"
					},
					gender:"Chọn giới tính"
				},
				errorClass: "help-inline",
				errorElement: "span",
				highlight:function(element, errorClass, validClass) {
					$(element).parents('.control-group').addClass('error');
				},
				unhighlight: function(element, errorClass, validClass) {
					$(element).parents('.control-group').removeClass('error');
					$(element).parents('.control-group').addClass('success');
				}
			});
		});
	  </script>
</div>